import React, { useState } from 'react';

// 默认点击按钮修改 count，Child 会被重新渲染，但是 Child 子组件又没有任何改变
// 通过 React.memo 来解决无关组件调用问题， React.memo 是一个高阶组件
// const Child = React.memo(() => {
//   console.log('Child 组件被执行了');
//   return (
//     <div>
//       Child
//     </div>
//   );
// })

let Child = () => {
  console.log('Child 组件被执行了');
  return (
    <div>
      Child
    </div>
  );
}

Child = React.memo(Child)



const App = () => {

  const [count, setCount] = useState(100)

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={()=>{
        setCount(count + 1)
      }}>加 1</button>

      {/* 每次 count 发送改变的时候都会导致 Child 子组件被重新渲染 */}
      {/* 但是 count 的改变实际上又跟 Child 组件没有任何关系 */}
      {/* 如果每次都重新渲染太过于浪费，所以有没有什么办法让 count 改变时不会重新渲染 Child */}

      <Child />
    </div>
  );
};

export default App;
